/*
 * @Author: weidewei
 * @Date: 2025-11-19 15:39:51
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-21 16:16:50
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\useContext.tsx
 */
import styled from 'styled-components';

const initState = {
  count: -1,
};

interface IAction {
  type: 'add' | 'reduction'
}

// type StateType = typeof initState; 
// 同等写法：
type StateType = {
  count: number
}
function reducerFn(state:StateType,action:IAction) {
  switch(action.type) {
    case 'add':
      return {count: state.count + 1}
    case 'reduction':
      return {count: state.count - 1}
    default:
      return state;
  }
}
function initStateFn(state: StateType) {
  return {count: Math.abs(state.count)}
}
export default function useReducerComp() {
  /*  参数
    1. reducer 是一个处理函数，用于更新状态, reducer 里面包含了两个参数，第一个参数是 state，第二个参数是 action。reducer 会返回一个新的 state。
  2. initialArg 是 state 的初始值。
  3. init 是一个可选的函数，用于初始化 state，如果编写了init函数，则默认值使用init函数的返回值，否则使用initialArg */

  /* 返回值
  useReducer 返回一个由两个值组成的数组：
当前的 state。初次渲染时，它是 init(initialArg) 或 initialArg （如果没有 init 函数）。 dispatch 函数。用于更新 state 并触发组件的重新渲染。
  const [state, dispatch] = useReducer(reducerFn, initState, initStateFn); */
  const [state, dispatch] = useReducer(reducerFn, initState, initStateFn)
  return (
    <Wrapper>
      <div className="use-reducer">
        <button onClick={()=>dispatch({type: 'add'})}>+1</button>
        <button onClick={()=>dispatch({type: 'reduction'})}>-1</button>
        <div>{state.count}</div>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .use-reducer {
    color: #000;
  }
`;
